<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="apiname" placeholder="请输入环境名称查询" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="findAll(size,current)">搜索</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="clearfind">重置</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="records"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column label="ID" prop="datasourceId" sortable="custom" align="center" width="60" :show-overflow-tooltip='true'>
        <template slot-scope="{row}">
          <span>{{ row.datasourceId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="环境名称" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.apiname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="ip地址" min-width="110px" align="center" :show-overflow-tooltip='true'>
        <template slot-scope="{row}">
           <span class="link-type" @click="update(row.datasourceId)">{{ row.ip }}</span>
        </template>
      </el-table-column>
      <el-table-column label="端口" width="80px" align="center" :show-overflow-tooltip='true'>
        <template slot-scope="{row}">
          <span>{{ row.port }}</span>
        </template>
      </el-table-column>
      <el-table-column label="协议类型" width="80px" align="center" :show-overflow-tooltip='true'>
        <template slot-scope="{row}">
          <span>{{ row.agreement }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80px" align="center" :show-overflow-tooltip='true'>
        <template slot-scope="{row}">
          <el-tag :type="row.state | statusFilter">
            {{ row.state }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="备注" min-width="100px" align="center" :show-overflow-tooltip='true'>
        <template slot-scope="{row}">
          <span>{{ row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="118px" align="center" :show-overflow-tooltip='true'>
        <template slot-scope="{row}">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" width="110pxpx" align="center" :show-overflow-tooltip='true'>
        <template slot-scope="{row}">
          <span>{{ row.createAccountName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改人" width="110px" align="center" :show-overflow-tooltip='true'>
        <template slot-scope="{row}">
          <span>{{ row.lastupdateAccountName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button @click="update(scope.row.datasourceId)" type="primary" size="mini">编辑</el-button>
            <el-button @click="deleteOne(scope.row.datasourceId)" type="danger" size="mini">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <!-- 分页 -->
      <el-pagination v-show="total>0" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
        :page-sizes="pagesizes" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
      <!--  编辑 -->
  </div>

</template>

<script>
  import waves from '@/directive/waves'
  import { findAllApi,deleteOneEnvironment} from '@/api/testingEnvironment'
  // Vue.use(vueWaves)
  export default{
      name:"TestingEnvironment",
      directives: { waves },
      filters: {
        statusFilter(status) {
          const statusMap = {
            0: 'success',
            1: 'info'
          }
          return statusMap[status]
        },
        typeFilter(type) {
          return calendarTypeKeyValue[type]
        }
      },
      data(){
        return{
          tableKey:0,
          listLoading: true,
          user:{},
          records:[],
          total: 0,
          current: 1,
          size: 10,
          apiname:"",
          pagesizes: [10, 20, 50, 100],
          testingEnvironmentAdd:{},
          testingEnvironmentUpdateFrom:{},
          dialogFormVisible:false,
          formLabelWidth:'120px'
        }
      },
      methods: {
        //获取用户信息
        getUser() {
          var json = localStorage.getItem("user");
          this.user = JSON.parse(json);
        },
        //查询方法
        findAll(size, current) {
          var data={
            current: current,
            size: size,
            apiname:this.apiname
          };
          this.listLoading = true
          findAllApi(data).then(resp=>{
              this.total=resp.data.total;
              this.current = resp.data.current;
              this.size = resp.data.size;
              var records=resp.data.records;
              for(var i=0;i<records.length;i++){
                  if(records[i].state==0){
                    records[i].state="启用";
                  }else{
                    records[i].state="未启用";
                  }
              }
              this.records=records;
              setTimeout(() => {
                this.listLoading = false
              }, 1.5 * 1000)
          })
        },
        //条数变更
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.findAll(val, this.current)
        },
        //页码变更
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.findAll(this.size, val)
        },
        //清空查询条件
        clearfind() {
          this.apiname="";
          this.findAll(this.size, this.current);
        },
        //新增测试环境
        add(){
            this.$router.push({
              name:"testingEnvironmentFrom",
              query:{isAdd:true}
            });
        },
        deleteOne(datasourceId){
            var ids=[];
            ids.unshift(datasourceId);
            var TestingEnvironmentDeleteFrom={};
            TestingEnvironmentDeleteFrom.ids=ids;
            deleteOneEnvironment(TestingEnvironmentDeleteFrom).then(resp=>{
              this.$message({
                        message: resp.msg,
                        type: 'success'
                      });
                this.findAll(this.size,this.current);
            })
        },
        update(datasourceId){
          this.$router.push({
              name:"testingEnvironmentFrom",
              query:{isAdd:false,datasourceId:datasourceId}
            });
        },
        sortChange(data) {
          const { prop, order } = data
          if (prop === 'id') {
            this.sortByID(order)
          }
        }
      },
      created() {
        this.findAll(this.size,this.current);
      }
    }
</script>

<style>

  .paginationClass {
      position: fixed;
      bottom: 0;
      height: 40px;
      width: 100%;
      text-align: center;
  }

  .pagination-container {
    background: #fff;
    padding: 32px 16px;
  }
  .pagination-container.hidden {
    display: none;
  }
  .link-type{
    display: block;
  }
</style>
